<template>
    <div>
        <Card class="chat">
            <Row :gutter="20">
                <Col :md="24" :lg="12">
                    <div class="setting-content">
                        <div class="setting-title">智能助手页面配置</div>
                        <Tabs v-model="tabName">
                            <TabPane label="基础配置" name="basic"></TabPane>
                            <TabPane label="输入框" name="quick"></TabPane>
                            <TabPane label="公告" name="notice"></TabPane>
                            <TabPane label="反馈" name="feedback"></TabPane>
                            <TabPane label="未知答复" name="system"></TabPane>
                        </Tabs>
                        <div style="position: relative">
                            <Form ref="emailForm" :model="form" :label-width="120" label-position="left" :rules="formValidate">
                                <div v-show="tabName == 'basic'">
                                    <FormItem label="对话框标题名称" prop="title">
                                        <Input type="text" v-model="form.title" placeholder="请输入对话框标题名称" />
                                    </FormItem>
                                    <FormItem label="机器人头像" prop="avatar" class="form-noheight">
                                        <uploadPicInput v-model="form.avatar" />
                                    </FormItem>
                                    <FormItem label="进入系统提示" prop="sysMessage">
                                        <Input type="text" v-model="form.sysMessage" placeholder="请输入进入系统提示" />
                                    </FormItem>
                                    <FormItem label="初始消息" prop="welcomeMessage">
                                        <Input type="textarea" :rows="5" v-model="form.welcomeMessage" placeholder="请输入点踩后显示的文本" />
                                    </FormItem>
                                    <FormItem label="初始富文本消息" prop="initMessage">
                                        <editor id="initMessage" v-model="form.initMessage" height="150" />
                                    </FormItem>
                                </div>
                                <div v-show="tabName == 'quick'">
                                    <FormItem label="输入框占位文本" prop="placeholder">
                                        <Input type="text" v-model="form.placeholder" placeholder="请输入输入框占位文本" />
                                    </FormItem>
                                    <FormItem label="快捷短语" prop="quickReplies">
                                        <vuedraggable :list="tagList" :animation="200" ghost-class="thumb-ghost">
                                            <Tag
                                                size="large"
                                                closable
                                                v-for="(item, index) in tagList"
                                                :key="index"
                                                :color="item.isHighlight ? 'blue' : 'default'"
                                                :class="{ 'ivu-close-color': item.isHighlight }"
                                                @click.native="editQuickReply(item)"
                                                @on-close="handleDelete(item)"
                                            >
                                                <span v-if="item.icon">[{{ item.icon }}]</span>
                                                {{ item.name }}
                                            </Tag>
                                        </vuedraggable>
                                        <div style="display: flex; align-items: center">
                                            <Button icon="md-add" type="dashed" @click="addQuickReply" style="0margin-top: 5px">添加快捷短语</Button>
                                            <Tooltip content="点击短语可编辑，可拖拽交换顺序" placement="right" transfer max-width="280" style="display: inline-block !important; padding-top: 5px">
                                                <Icon type="md-help-circle" size="20" color="#c5c5c5" style="margin-left: 10px; cursor: pointer" />
                                            </Tooltip>
                                        </div>
                                    </FormItem>
                                </div>
                                <div v-show="tabName == 'notice'">
                                    <FormItem label="公告开关" prop="noticeType">
                                        <i-switch v-model="form.noticeType" :true-value="'richtext'" :false-value="''">
                                            <span slot="open">开</span>
                                            <span slot="close">关</span>
                                        </i-switch>
                                        <Tooltip content="开启后将在PC端的右侧显示公告内容" placement="right" transfer max-width="280" style="display: inline-block !important">
                                            <Icon type="md-help-circle" size="20" color="#c5c5c5" style="margin-left: 10px; cursor: pointer" />
                                        </Tooltip>
                                    </FormItem>
                                    <FormItem label="公告标题" prop="noticeTitle">
                                        <Input type="text" v-model="form.noticeTitle" placeholder="请输入公告标题" />
                                    </FormItem>
                                    <FormItem label="公告内容" prop="noticeContent">
                                        <editor id="noticeContent" v-model="form.noticeContent" height="250" />
                                    </FormItem>
                                </div>
                                <div v-show="tabName == 'feedback'">
                                    <FormItem label="点赞后反馈文本" prop="textOfGood">
                                        <Input type="textarea" :rows="5" v-model="form.textOfGood" placeholder="请输入点赞后显示的文本" />
                                    </FormItem>
                                    <FormItem label="点踩后反馈文本" prop="textOfBad">
                                        <Input type="textarea" :rows="5" v-model="form.textOfBad" placeholder="请输入点踩后显示的文本" />
                                    </FormItem>
                                </div>
                                <div v-show="tabName == 'system'">
                                    <FormItem label="未找到任何匹配回答的答复" prop="noDataReply">
                                        <editor id="noDataReply" v-model="form.noDataReply" height="250" />
                                    </FormItem>
                                </div>
                                <FormItem>
                                    <Button type="primary" style="width: 100px" :loading="saveLoading" @click="submit">保存更改</Button>
                                </FormItem>
                            </Form>
                            <Spin fix v-if="loading"></Spin>
                        </div>
                    </div>
                </Col>
                <Col :md="24" :lg="12" class="iphone-content">
                    <div
                        class="demo-model"
                        :style="{
                            backgroundImage: 'url(' + require('@/assets/icon/iPhoneX.png') + ')'
                        }"
                    >
                        <div class="model-content">
                            <iframe scrolling="auto" frameborder="0" :src="demoUrl" id="demo-modal" class="iframe"></iframe>
                        </div>
                    </div>
                </Col>
            </Row>
            <div class="preview-pc" @click="showDemo(true)">
                <Icon type="md-desktop" style="margin-right: 5px" />
                预览PC版
            </div>
        </Card>

        <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
            <Form ref="replyForm" :model="replyForm" label-position="top" :rules="replyFormValidate">
                <FormItem label="快捷短语" prop="name">
                    <Input v-model="replyForm.name" />
                </FormItem>
                <FormItem label="图标" prop="icon">
                    <Select filterable v-model="replyForm.icon" clearable>
                        <Option value="alarm">闹钟 alarm</Option>
                        <Option value="apps">应用 apps</Option>
                        <Option value="bullhorn">喇叭 bullhorn</Option>
                        <Option value="camera">相机 camera</Option>
                        <Option value="cart">购物车 cart</Option>
                        <Option value="close">关闭 close</Option>
                        <Option value="check">确认 check</Option>
                        <Option value="edit">编辑 edit</Option>
                        <Option value="ellipsis-h">更多 ellipsis-h</Option>
                        <Option value="file">文件 file</Option>
                        <Option value="folder">文件夹 folder</Option>
                        <Option value="home">首页 home</Option>
                        <Option value="image">图片 image</Option>
                        <Option value="info-circle">提示 info-circle</Option>
                        <Option value="keyboard">键盘 keyboard</Option>
                        <Option value="message">消息 message</Option>
                        <Option value="mic">麦克风 mic</Option>
                        <Option value="paper-plane">发送 paper-plane</Option>
                        <Option value="plus">加号 plus</Option>
                        <Option value="refresh">刷新 refresh</Option>
                        <Option value="search">搜索 search</Option>
                        <Option value="share">分享 share</Option>
                        <Option value="smile">笑脸 smile</Option>
                        <Option value="tel">电话 tel</Option>
                        <Option value="thumbs-down">点赞 thumbs-down</Option>
                        <Option value="thumbs-up">点踩 thumbs-up</Option>
                    </Select>
                </FormItem>
                <FormItem label="高亮显示" prop="isHighlight">
                    <i-switch v-model="replyForm.isHighlight">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </FormItem>
                <FormItem label="右上角红点" prop="isNew">
                    <i-switch v-model="replyForm.isNew">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalVisible = false">取消</Button>
                <Button type="primary" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getAutoChatSet, editAutoChatSet, getOtherSet } from '@/api/index';
import editor from '@/components/editor';
import uploadPicInput from '@/views/my-components/xboot/upload-pic-input';
import vuedraggable from 'vuedraggable';
export default {
    name: 'chat-setting',
    components: {
        editor,
        uploadPicInput,
        vuedraggable
    },
    data() {
        return {
            tabName: 'basic',
            loading: false, // 表单加载状态
            saveLoading: false,
            form: {
                noticeType: ''
            },
            formValidate: {},
            modalType: 0, // 添加或编辑标识
            modalVisible: false, // 添加或编辑显示
            modalTitle: '', // 添加或编辑标题
            replyForm: {
                name: '',
                icon: '',
                isHighlight: false,
                isNew: false
            },
            replyFormValidate: {
                name: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            tagList: [],
            domain: '',
            demoUrl: ''
        };
    },
    methods: {
        init() {
            this.getData();
            this.initUrl();
        },
        getData() {
            this.loading = true;
            getAutoChatSet().then(res => {
                this.loading = false;
                if (res.success) {
                    if (res.result) {
                        // 转换null为""
                        let v = res.result;
                        for (let attr in v) {
                            if (v[attr] == null || v[attr] == 'null') {
                                v[attr] = '';
                            }
                        }
                        let str = JSON.stringify(v);
                        let data = JSON.parse(str);
                        this.form = data;
                        if (res.result.quickReplies && res.result.quickReplies.length >= 0 && res.result.quickReplies != 'null') {
                            this.tagList = JSON.parse(res.result.quickReplies);
                        }
                    }
                }
            });
        },
        initUrl() {
            getOtherSet().then(res => {
                if (res.result) {
                    this.domain = res.result.domain;
                    this.showDemo();
                }
            });
        },
        showDemo(previewPC) {
            if (!this.domain) {
                this.$Modal.confirm({
                    title: '您还未配置访问域名',
                    content: '您还未配置应用部署访问域名，是否现在立即去配置?（配置后请刷新该页面）',
                    onOk: () => {
                        this.$router.push({
                            name: 'setting',
                            query: { name: 'other' }
                        });
                    }
                });
                return;
            }
            this.demoUrl = `${this.domain}/chat/chat.html?accessToken=${this.getStore('accessToken')}&time=${new Date()}`;
            if (previewPC) {
                window.open(this.demoUrl);
            }
        },
        addQuickReply() {
            this.modalType = 0;
            this.modalTitle = '添加快捷短语';
            this.$refs.replyForm.resetFields();
            this.modalVisible = true;
        },
        editQuickReply(v) {
            this.modalType = 1;
            this.modalTitle = '编辑快捷短语';
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.replyForm = data;
            this.modalVisible = true;
        },
        handleDelete(v) {
            this.tagList = this.tagList.filter(e => {
                return e.name != v.name;
            });
        },
        handleSubmit() {
            this.$refs.replyForm.validate(valid => {
                if (valid) {
                    if (this.modalType == 0) {
                        // 添加
                        this.tagList.push({
                            id: new Date().getTime(),
                            name: this.replyForm.name,
                            icon: this.replyForm.icon,
                            isHighlight: this.replyForm.isHighlight,
                            isNew: this.replyForm.isNew
                        });
                        this.modalVisible = false;
                    } else {
                        // 编辑
                        for (let i = 0; i < this.tagList.length; i++) {
                            if (this.tagList[i].id == this.replyForm.id) {
                                this.tagList[i] = this.replyForm;
                            }
                        }
                        this.modalVisible = false;
                    }
                }
            });
        },
        submit() {
            this.submitLoading = true;
            this.form.quickReplies = JSON.stringify(this.tagList);
            editAutoChatSet(this.form).then(res => {
                this.submitLoading = false;
                if (res.success) {
                    this.$Message.success('操作成功');
                    this.showDemo();
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style lang="less">
.chat {
    .setting-content {
        padding: 5px 0 0 10px;
        .setting-title {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            margin-bottom: 25px;
        }
    }

    .iphone-content {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        .demo-model {
            background-repeat: no-repeat;
            background-size: 100%;
            width: 360px;
            height: 730px;
            padding: 48px 13px 30px 13px;
            .model-content {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                .iframe {
                    height: 100%;
                    width: 100%;
                    border-radius: 16px;
                }
            }
        }
    }
    .ivu-close-color {
        .ivu-icon-ios-close {
            color: #666 !important;
        }
    }
}
.preview-pc {
    position: absolute;
    z-index: 999;
    right: 40px;
    bottom: 50px;
    background-color: #fff;
    width: 150px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    -webkit-box-shadow: 0 12px 12px 0 rgba(9, 7, 7, 0.03), 0 8px 4px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 12px 12px 0 rgba(9, 7, 7, 0.03), 0 8px 4px 0 rgba(0, 0, 0, 0.04);
    &:hover {
        color: #2d8cf0;
        background: #fafafa;
    }
}
</style>
